const path = require('path')
const webpack = require('webpack')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
// console.log(__dirname)

module.exports = { // webpack 是基于nodejs
  mode: 'development', // 打包完文件未压缩
  // mode: 'production', // 打包完文件压缩
  // 当前程序的入口，必不可少 打包时 通过  webpack 指令
  // entry: './src/index.js'
  // entry: ['./src/index.js']
  entry: {
    app: './src/index.js'
  },
  output: {
    path: path.resolve(__dirname, '../', 'build'),
    filename: '[name].[hash:8].js'
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new CleanWebpackPlugin(),
     // 压缩css文件 ---- 提取css文件
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:8].css'
    }),
    new CopyWebpackPlugin({  // 克隆 src/assets 文件夹至输出目录下的 static 文件夹
      patterns: [
        {
          from: './src/assets',
          to: 'static'
        },
        {
          from: './public/favicon.ico',
          to: ''
        }
      ]
    }),
    new HTMLWebpackPlugin({
      template: './public/index.html',
      title: 'webpack 神奇之旅'
    })
  ],
  module: { // 用来处理各种后缀名不同的文件 ---- 万物皆模块
    rules: [
      {
        test: /\.css$/, // 正则
        use: [ // 解析器解析规则 ---- 从后到前
          // { loader: 'style-loader' },
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader' }
        ]
      },
      {
        test: /\.scss$/, // 正则
        use: [ // 解析器解析规则 ---- 从后到前
          // { loader: 'style-loader' },
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader' },
          { loader: 'sass-loader' }
        ]
      },
      {
        test: /\.less$/, // 正则
        use: [ // 解析器解析规则 ---- 从后到前
          // { loader: 'style-loader' },
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader' },
          { loader: 'less-loader' }
        ]
      },
      {
        test: /\.stylus$/, // 正则
        use: [ // 解析器解析规则 ---- 从后到前
          // { loader: 'style-loader' },
          { loader: MiniCssExtractPlugin.loader },
          { loader: 'css-loader' },
          { loader: 'stylus-loader' }
        ]
      }
    ]
  }
}